<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>







<div id="app">
  
  <h2>{{ timer | dateFilter }}</h2>
	
  <h4>padStart(长度，填充字符) 字符串填充方法， 将按照字符串的长度进行填充，当长度不符合第一个参数时就会用第二个参数的字符来填充,这里的是当月份或者时间为单位数时就补零 </h4>

</div>







<br>
<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
    timer: "",// 需要在data中指定属性，但因为过滤器的原因所以内容不重要
  	
  },

  methods:{

  },

  filters:{

    dateFilter:function(dataStr,pattern=""){
      var   dt = new Date()
      var year = dt.getFullYear()
      var mon  = (dt.getMonth()+1).toString().padStart(2,'0')
      var day  = (dt.getDate()).toString().padStart(2,'0')
      var hh = dt.getHours()
      var mm = (dt.getMinutes()).toString().padStart(2,'0')
      var ss = (dt.getSeconds()).toString().padStart(2,'0')

      return `${year}年-${mon}月-${day}日--${hh}:${mm}:${ss}`
    },

  }



})


</script>

	
</body>
</html>